<template>
	<view>
		<ms-tabs  :list="list" v-model="active" lineColor='#fb5d63' itemColor='#fb5d63' ></ms-tabs>
		<view >
			<view class="box" v-for="list in orderVoList" >
			  <p class="title">
				<span>
				 {{list.shopsName}}
				  <svg
					viewBox="0 0 1000 1000"
					class="demo-nav__back1"
				  >
					<path
					  fill-rule="evenodd"
					  fill="#969799"
					  d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"
					></path>
				  </svg>
				</span>
				<span class="unpaid">{{list.orderStatus==1?'待付款':(list.orderStatus==2?'待发货':(list.orderStatus==3?'待收货':(list.orderStatus==4?'交易成功':'待处理')))}}</span>
			  </p>
			  <div class="border"></div>
			  <ul class="list">
				<li class="list_one">
				  <p>
					 <image :src="list.picUrl" mode="" style="width: 250rpx;height: 250rpx;"></image>
				  </p>
				  <div style="">
					<h3 class="one_top">
					  {{list.productName}}
					</h3>
					<h3 class="one_bottom">
					  <span class="left">{{list.labelName}},{{list.labelUnit}}</span>
					  <p class="right">
					  	<span>￥{{list.labelPrice}}</span>
					  	<span style="font-size: 10px;color: #666666;">×{{list.productCnt}}</span>
					  </p>
					</h3>
				  </div>
				</li>
				<li class="total">合计：￥{{list.labelPrice*list.productCnt}}</li>
				<li class="btn">
				   <van-button round @click="cancelOrderVo(list)" v-if="list.orderStatus==1">取消订单</van-button>
				   <van-button round @click="deleteOrderVo(list)" v-if="list.orderStatus==4">删除订单</van-button>
				   <van-button color="#fb5d63" plain round  @click="paymentOrderVo(list)" v-if="list.orderStatus==1">我要付款</van-button>
				   <van-button color="#fb5d63" plain round  @click="retreatOrderVo(list)" v-if="list.orderStatus==2 || list.orderStatus==3">申请退货</van-button>
				   <van-button color="#fb5d63" plain round  @click="confirmOrderVo(list)" v-if="list.orderStatus==3">确认收货</van-button>
				   <van-button color="#fb5d63" plain round  @click="evaluateOrderVo(list)" v-if="list.orderStatus==4 && list.commentStatus==0">商品评价</van-button>
				</li>
			  </ul>
			</view>
		</view>
	</view>
</template>

<script>
	  import { selectOrderVoList,updateOrderVo } from '../../api/commodity/order_master.js';
	  import { Dialog } from 'vant';
	export default {
		 components: {
			 
		 },
		data() {
			return {
				  list: [
					  {
					   title:'全部订单',
					   id:'0',
					 },
					 {
					   title:'待付款',
					   id:'1',
					 },
					 {
					   title:'待发货',
					   id:'2',
					 },
					 {
					   title:'待收货',
					   id:'3',
					 },
					 {
					   title:'已收货',
					   id:'4',
					 },
					 {
					   title:'退货',
					   id:'8',
					 },
					 {
					   title:'换货',
					   id:'9',
					 },
				  ],
				 active:0,
				  //订单列表
				 orderVoList:[],
				//查询订单参数
				 orderVo:{
					orderStatus:'',
				 },
				   //订单修改操作参数
				 upOrderVo:{
				   orderStatus:'',
				   orderId:'',
				 },
				 
								 
			}
		},
		//页面渲染前加载
		created(){
			if(JSON.parse(sessionStorage.getItem('active'))!=null && JSON.parse(sessionStorage.getItem('active'))!=''){
			  this.active = parseInt(JSON.parse(sessionStorage.getItem('active')));
			}
			this.orderVo.orderStatus = this.active;
			this.getSelectOrderVoList(this.orderVo);
		},
		methods: {
			//取消订单
			cancelOrderVo(list){
				var than = this;
				uni.showModal({
				    title: '提示',
				    content: '是否取消订单，请确认操作',
				    success: function (res) {
				        if (res.confirm) {
							console.log("yes")
							than.quxiao(list);
				        } else if (res.cancel) {
							console.log("no")
				        }
						
				    }
				});
			},
			//取消
			quxiao(list){
				this.upOrderVo.orderId = list.orderId;
				this.upOrderVo.orderStatus = 7;
				 updateOrderVo(this.upOrderVo).then((res)=>{
					if(res.data.code==200){
					  this.getSelectOrderVoList(this.orderVo);
					  console.log(JSON.stringify(res),"1");
					}
				  });
			},
			//删除订单
			deleteOrderVo(list){
				var than = this;
				uni.showModal({
				    title: '提示',
				    content: '是否删除订单，请确认操作',
				    success: function (res) {
				        if (res.confirm) {
							console.log("yes");
							than.shanchu(list);
				        } else if (res.cancel) {
							console.log("no")
				        }
				    }
				});
			},
			//删除
			shanchu(list){
				  this.upOrderVo.orderId = list.orderId;
				  this.upOrderVo.orderStatus = 6;
				  updateOrderVo(this.upOrderVo).then((res)=>{
					  if(res.data.code==200){
						this.getSelectOrderVoList(this.orderVo);
						console.log(JSON.stringify(res),"2");
					  }
					})
			},
			//确认收货
			confirmOrderVo(list){
				var than = this;
				uni.showModal({
				    title: '提示',
				    content: '是否已收到商品，请确认操作',
				    success: function (res) {
				        if (res.confirm) {
							console.log("yes");
							than.shouhuo(list);
				        } else if (res.cancel) {
							console.log("no")
				        }
				    }
				});
			},
			//收货
			shouhuo(list){
				   this.upOrderVo.orderId = list.orderId;
				   this.upOrderVo.orderStatus = 4;
				    updateOrderVo(this.upOrderVo).then((res)=>{
					   if(res.data.code==200){
						 this.getSelectOrderVoList(this.orderVo);
						 console.log(JSON.stringify(res),"3");
					   }
					 });
			},
		    //查询订单信息
			getSelectOrderVoList(orderVo){
			  if(orderVo.orderStatus==5){
				orderVo.orderStatus = 8;
			  }else if(orderVo.orderStatus==6){
				orderVo.orderStatus = 9;
			  }
			  console.log(orderVo.orderStatus);
			  selectOrderVoList(orderVo).then((res)=>{
				if(res.data.code==200){
				  this.orderVoList = res.data.data;
				}
				console.log(JSON.stringify(res));
			  })
			},
			//申请退货
			retreatOrderVo(list){
				 sessionStorage.setItem('list',JSON.stringify(list));
				 uni.navigateTo({
				     url: '../ReturnRefund/ReturnRefund'
				 });
			},
			//商品评价
			evaluateOrderVo(list){
				 sessionStorage.setItem('list',JSON.stringify(list));
				 uni.navigateTo({
				 	url: '../EvaluateOrder/EvaluateOrder'
				 });
			},
			//去支付页面
			paymentOrderVo(list){
				sessionStorage.setItem('list',JSON.stringify(list));
				uni.navigateTo({
					url: '../orderPay/orderPay'
				});
			},
			
		},
		//同步数据
		watch:{
			active() {
				console.log(this.active)  // 0
				this.orderVo.orderStatus = this.active;
				this.getSelectOrderVoList(this.orderVo);
			},
			
		},
	}
</script>

<style>
	.box {
	  width: 93%;
	  margin: 1rem auto;
	  border-radius: 5rpx;
	  overflow: hidden;
	  background-color: #fff;
	}
	
	.box .title {
	  height: 2.5rem;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  box-sizing: border-box;
	  padding: 0 1rem;
	}
	
	.demo-nav__back1 {
	  width: 1rem;
	  transform: rotateZ(180deg);
	}
	
	.unpaid {
	  color: #fb5d63;
	  font-size: 26rpx;
	}
	
	.list {
	  width: 100%;
	}
	
	.list .list_one {
	  width: 100%;
	  display: flex;
	  justify-content: space-between;
	  margin-left: 29rpx;
	  margin-top: 16rpx;
	}
	
	.one_top {
	  width: 70%;
	  font-size: 24rpx;
	  color: #222222;
	  text-align: left;
	  margin-left: 1rem;
	}
	
	.one_bottom {
	  display: flex;
	  justify-content: space-between;
	  margin: 12rpx 60rpx 0 1rem;
	}
	
	.one_bottom .left {
	  font-size: 24rpx;
	  color: #666666;
	}
	
	.one_bottom .right {
	  font-size: 28rpx;
	  color: rgba(34, 34, 34, 100);
	  margin-right: 60rpx;
	  margin-top: 150rpx;
	}
	
	.total {
	  color: rgba(34, 34, 34, 100);
	  font-size: 32rpx;
	  text-align: right;
	  margin-right: 60rpx;
	  /* margin-top: 60rpx; */
	}
	
	.btn {
	  margin: 50rpx 60rpx 36rpx 0;
	  text-align: right;
	}
	
	.btn span {
	  display: inline-block;
	  width: 148rpx;
	  height: 52rpx;
	  line-height: 52rpx;
	  font-size: 30rpx;
	  text-align: center;
	  font-family: Arial;
	}
	
	.btn .left_btn {
	  margin-right: 32rpx;
	}
	
	.btn .right_btn {
	  color: white;
	  border-color: #fb5d63;
	}
	
	.border {
	  width: 95%;
	  margin: 0 auto;
	  height: NaNpx;
	  border: 2rpx solid rgba(247, 247, 247, 100);
	}
	  
</style>
